<template>
  <view class="container">
    <view class="navbar u-f-ajc">
      <image src="/static/jibei/xiaofeiquan/header.png" mode="widthFix"></image>
    </view>

    <view class="content">
      <view class="u-f-ac u-f-jsb bi_box">
        <image src="/static/jibei/xiaofeiquan/bi.png" mode=""></image>
        <view class="bi_right_box u-f u-f-jse u-f-column">
          <view class="u-f-ac u-f-jsb num_box" @click="obtain">
            <view class="u-f-ajc u-f-column ">
              <view class="kuang_title">待释放消费值</view>
              <view class="kuang_num">{{jfz}}</view>
            </view>
            <u-icon name="arrow-right" size="32" color="#115763"></u-icon>
          </view>
          <view class="u-f-ac u-f-jsb num_box">
            <view class="u-f-ajc u-f-column ">
              <view class="kuang_title">已释放消费值</view>
              <view class="kuang_num">{{jfz_out}}</view>
            </view>
            <u-icon name="arrow-right" size="32" color="#115763"></u-icon>
          </view>
        </view>
      </view>
      <view class="duihuan_title u-f-ac u-f-jsb">
        <view>消费券兑换</view>
        <view style="color: #CA2C09;" @click="$u.route({type:'tab', url: '/pages/member/member'})">更多全球购好项目 ></view>
      </view>
      <view class="msg_box">
        <view class="msg_item" style="height: 40%;">
          <view class="msg_title">消费券来源</view>
          <view class="msg_text">#消费券</view>
        </view>
        <view class="msg_item" style="height: 60%;">
          <view class="msg_title">消费券价值</view>
          <view class="msg_text">#消费券</view>
        </view>
      </view>

      <view class="item_list">
        <view class="items u-f-ac">
          <view class="u-f-ajc" style="width: 50%;">时间</view>
          <view class="u-f-ajc" style="width: 25%;">数量</view>
          <view class="u-f-ajc" style="width: 25%;">来源</view>
        </view>
        <view class="items items2 u-f-ac" @click="toarticlexq(value.projectid)" v-for="(value,key) in out_log"
          :key="key">
          <view class="u-f-ajc" style="width: 50%;">{{value.time}}</view>
          <view class="u-f-ajc" style="width: 25%;">{{value.num}}</view>
          <view class="u-f-ajc" style="width: 25%;">{{value.common}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        openid: '',
        out_log: [],
        jfz: '',
        jfz_out: '',
      }
    },
    onLoad: function(e) {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.getdata()
          this.getdata2()
          //页面一加载时请求一次数据`
          uni.hideLoading()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      getdata() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=tzz.jfz_out&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            console.log(res)
            this.out_log = res.data.out_log
          },
          fail: () => {},
          complete: () => {}
        });
      },
      obtain() {
        uni.navigateTo({
          url: 'obtain/obtain?type=' + 1
        })
      },
      getdata2() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=tzz.jfz_index&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            console.log(res)
            this.jfz_out = res.data.jfz_out
            this.jfz = res.data.jfz
          },
          fail: () => {},
          complete: () => {}
        });
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 140rpx 0 0;

    image {
      width: 80%;
    }
  }

  .content {
    // padding: 0 40rpx;
  }

  .bi_box {
    padding: 0 30rpx;

    image {
      width: 200rpx;
      height: 200rpx;
    }

    .bi_right_box {
      width: 460rpx;
      height: 260rpx;
      background: url(/static/jibei/xiaofeiquan/kuang2.png) no-repeat 0 0;
      background-size: cover;
      padding: 24rpx 60rpx;
      box-sizing: border-box;

      .num_box {
        view {
          line-height: 1;
          font-size: 30rpx;
          color: #115763;
        }

        .kuang_num {
          font-size: 36rpx;
          color: #CA2C09;
          margin-top: 10rpx;
        }
      }
    }
  }

  .duihuan_title {
    padding: 0 70rpx;

    view {
      font-size: 30rpx;
      color: #115763;
    }
  }

  .msg_box {
    width: 100%;
    height: 520rpx;
    background: url(/static/jibei/xiaofeiquan/kuang.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
    padding: 40rpx 60rpx;

    .msg_item {
      width: 100%;
      height: 50%;
      color: #115763;

      .msg_title {
        font-size: 38rpx;
        font-weight: bold;
      }
    }
  }

  .item_list {
    .items {
      border-bottom: 2px solid #0F6C76;
      padding: 16rpx 0;

      view {
        color: #115763;
        font-size: 30rpx;
      }
    }

    .items2 {
      view {
        color: #CA2C09;
      }
    }
  }
</style>
